<template>
	<u-popup
		mode="bottom"
		bgColor="transparent"
		:show="showPrivacy"
		@open="openPrivacy"
		@close="closePrivacy">
		<view class="login-popup">
			<view class="login-popup-title main-flex">微信授权</view>
			<view class="login-popup-content">
				<view class="login-popup-content-t">廷与食材小程序申请获取您的头像、昵称:</view>
				<view class="login-popup-content-b">
					<view class="privacy-form">
						<view class="privacy-item main-flex">
							<view class="privacy-item-name">头像</view>
							<view class="privacy-item-header main-flex-item">
								<u-avatar
									size="32"
									mode="aspectFill"
									bg-color="#f5f5f5"
									:src="imgUrl(headerImg)"></u-avatar>
								<button
									class="privacy-item-header-btn"
									@chooseavatar="changeHeader"
									open-type="chooseAvatar">上传头像</button>
							</view>
						</view>
						<view class="privacy-item main-flex">
							<view class="privacy-item-name">昵称</view>
							<view class="privacy-item-text main-flex-item">
								<input
									class="privacy-item-input"
									v-model="nickName"
									type="nickname"
									@bindnicknamereview="bindnicknamereview"
									placeholder="请输入昵称">
							</view>
						</view>
					</view>
					<view class="login-popup-btn">
						<button class="ty-button ty-button-confirm login-popup-btn-item" @click="confirmPrivacy">授权</button>
						<button class="ty-button ty-button-cancel login-popup-btn-item" @click="cancelPrivacy">拒绝</button>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
  /**
   * PrivacyPopup 授权弹窗
   * @description 授权弹窗
   * @event {Function} close 关闭
   */
	import { computed, onMounted, ref, watch } from "vue"
	import useUserStore from "@/store/modules/user"
	import modal from '@/plugins/modal'
	import { upload } from "@/api/system/common"
	
	const userStore = useUserStore()
	const props = defineProps({
		showPrivacy: {
			type: Boolean,
			default: false 
		}
	})
	
	const emits = defineEmits(['close', 'confirm', 'cancel'])
	const openPrivacy = () => {
		
	}
	const closePrivacy = () => {
		emits('close')
	}
	
	const nickName = ref('')
	const headerImg = ref('')
	
	// 上传头像
	const changeHeader = (e) => {
		console.log(e)
		if (e.target.avatarUrl) {
			upoladFun(e.target.avatarUrl)
		}
	}
	// 图片上传
	const upoladFun = (img) => {
		uni.showLoading({
			title: '图片上传中'
		})
		upload(img).then(res => {
			const data = JSON.parse(res.data)
			if (data.code === 200 && data.url) {
				headerImg.value = data.url
			} else {
				uni.$u.toast('上传失败')
			}
			uni.hideLoading()
		}).catch(err => {
			uni.$u.toast(err)
			uni.hideLoading()
		})
	}
	
	// 昵称
	const bindnicknamereview = (e) => {
		console.log(e)
	}
	//授权成功
	const confirmPrivacy = () => {
		if (!headerImg.value) return uni.$u.toast('请上传您的头像')
		if (!nickName.value) return uni.$u.toast('请输入您的昵称')
		emits('confirm', {
			nickName: nickName.value,
			headerImg: headerImg.value
		})
		emits('close')
	}
	// 拒绝
	const cancelPrivacy = () => {
		emits('cancel')
		emits('close')
	}
</script>

<style lang="scss" scoped>
  .login-popup {
		border-radius: 20px 20px 0rpx 0rpx;
		background-color: #ffffff;
		padding: 0 15px;
		padding-bottom: var(--window-bottom);
		&-title {
			height: 48px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			justify-content: center;
		}
		&-content {
			padding: 40rpx 0;
			&-t {
				font-size: 28rpx;
			}
			.privacy {
				&-form {
					margin-top: 40rpx;
				}
				&-item {
					height: 72rpx;
					margin: 20rpx 0;
					&-name {
						font-size: 28rpx;
						width: 100rpx;
					}
					&-input {
						font-size: 28rpx;
					}
					&-header {
						position: relative;
						&-btn {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							z-index: 1;
							opacity: 0;
						}
					}
				}
			}
		}
		&-btn {
			margin-top: 60rpx;
			&-item {
				width: 100%;
				height: 72rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 600;
				margin-top: 30rpx;
			}
		}
	}
</style>
